/**
 * Created by mac on 2017/7/4.
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    Image,
    ActivityIndicator
} from 'react-native';

import {CachedImage} from "react-native-img-cache";

//cat 数据
let middleAdvsData = require('./data.json')

var screenW = Dimensions.get('window').width;
var itemCount = 3;
var kong = 5;
var itemW = (screenW-(itemCount-1)*kong)/itemCount;
export default class Recommend extends Component{

    // 构造
    constructor(props) {
        super(props);
        this.renderDetailView=this.renderDetailView.bind(this);
        // 初始状态
        this.state = {

        };
    }

    renderDetailView(allData){

        let data = allData.data.recommendChannel.recommendAdvs;

        console.log(data);

        var row= [];

        if(data.length === 0){
            return (
                <View style={{flex:1}}>
                    <ActivityIndicator size='large' color='gray'/>
                </View>
            )
        }

        for (let i=0;i<data.length;i++){


            row.push(
                <View style={{flex:1}}>
                    <CachedImage key={i} style={{width:itemW,height:itemW/21*27}} source={{uri:data[i].pic}}/>
                </View>
            )

        }

        return(

            <ScrollView contentContainerStyle={{
                width:screenW,
                flexDirection:'row',
                backgroundColor:'#eeeeee',
                justifyContent:'space-between',}}
                        horizontal={true}
                        bounces={false}
            >
                    {row}
            </ScrollView>
        )

    }

    render(){
        return (
            <View style={styles.backgroundView}>
                {this.renderDetailView(middleAdvsData)}
            </View>
        )
    }
}

const styles=StyleSheet.create({
    backgroundView:{
        height:itemW/21*27,
        width:screenW,
        backgroundColor:'#eeeeee',

    }

})